<template>
  <CollapseContainer title="安全设置" :canExpan="false">
    <List>
      <template v-for="item in secureSettingList" :key="item.key">
        <ListItem>
          <ListItemMeta>
            <template #title>
              {{ item.title }}
              <StrengthMeter
                v-if="item.key === '1' && isPwdShow"
                v-model:value="pwd"
                maxLength="20"
              ></StrengthMeter>
              <InputNumber
                v-if="item.key === '2' && isPhoneShow"
                v-model:value="phone"
              ></InputNumber>
              <div
                class="float-right mt-10px mr-30px text-blue-500 text-font-normal cursor-pointer"
                v-if="item.key === '1'"
                @click="handClick(item.key)"
              >
                {{ isPwdShow ? '完成' : '修改' }}
              </div>
              <div
                class="float-right mt-10px mr-30px text-blue-500 text-font-normal cursor-pointer"
                v-if="item.key === '2'"
                @click="handClick(item.key)"
              >
                {{ isPhoneShow ? '完成' : '修改' }}
              </div>
            </template>
            <template #description>
              <div>{{ item.description }}</div>
            </template>
          </ListItemMeta>
        </ListItem>
      </template>
    </List>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { List, InputNumber } from 'ant-design-vue';
  import { CollapseContainer } from '@/components/Container';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getAuthCache } from '@/utils/auth';
  import { USER_INFO_KEY } from '@/enums/cacheEnum';
  import { StrengthMeter } from '@/components/StrengthMeter';
  import { userUpdateApi } from '@/api/jiankang/user';
  import { router } from '@/router';
  import { PageEnum } from '@/enums/pageEnum';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();

  const userInfo: any = getAuthCache(USER_INFO_KEY);
  const { createMessage } = useMessage();
  console.log(userInfo);

  const pwd = ref(userInfo.pwd);
  const phone = ref(userInfo.phone);
  const isPwdShow = ref(false);
  const isPhoneShow = ref(false);

  const ListItem = List.Item;
  const ListItemMeta = List.Item.Meta;

  function handClick(key: string) {
    console.log(key);

    switch (key) {
      case '3':
      case '4':
      case '5':
        createMessage.warning('功能暂未开放~');
        break;
      case '1':
        if (isPwdShow.value) {
          if (validate(pwd.value)) return createMessage.warning('密码不能为空');
          isPwdShow.value = !isPwdShow.value;
          updateUserInfo();
        } else {
          isPwdShow.value = !isPwdShow.value;
        }
        break;
      case '2':
        if (isPhoneShow.value) {
          if (validate(phone.value)) return createMessage.warning('手机号不能为空');
          isPhoneShow.value = !isPhoneShow.value;
          updateUserInfo();
        } else {
          isPhoneShow.value = !isPhoneShow.value;
        }
        break;
      default:
        createMessage.warning('功能暂未开放~');
    }
  }
  /**
   * 判断输入的字符是否为空
   * @param value 输入的字符
   */
  function validate(value) {
    value = value.toString();
    if (value === undefined || value === null) return true;
    return value.trim().length === 0;
  }

  async function updateUserInfo() {
    const params = Object.assign({}, userInfo, {
      pwd: pwd.value,
      phone: phone.value,
    });
    await userUpdateApi(params);
    if (userInfo.pwd !== pwd.value) {
      createMessage.success('密码修改成功，请重新登录');
      // router.replace(PageEnum.BASE_LOGIN);
      userStore.logout();
      return;
    }
    createMessage.success('更新成功');
  }

  const secureSettingList = [
    {
      key: '1',
      title: '账户密码',
      description: `当前密码：：${(userInfo as any).pwd}`,
      extra: '修改',
    },
    {
      key: '2',
      title: '密保手机',
      description: `已绑定手机：：${(userInfo as any).phone || '未绑定'}`,
      extra: '修改',
    },
    // {
    //   key: '3',
    //   title: '密保问题',
    //   description: '未设置密保问题，密保问题可有效保护账户安全',
    //   extra: '修改',
    // },
    // {
    //   key: '4',
    //   title: '备用邮箱',
    //   description: '已绑定邮箱：：test@test.com',
    //   extra: '修改',
    // },
    // {
    //   key: '5',
    //   title: 'MFA 设备',
    //   description: '已绑定iphone20promax',
    //   extra: '修改',
    // },
  ];
</script>
